<script setup lang="ts">
import {ref} from "vue";
import router from "@/router.ts";

const list = [
    {
        name: 'echarts bar3d',
        path: '/bar3D'
    },
    {
        name: 'echarts bar3d socket',
        path: '/socketBar3D'
    },
    {
        name: 'socket性能测试',
        path: '/socketTest'
    },
    {
        name: 'SSE 性能测试',
        path: '/sSETest'
    }
]


const to = (d) => {
    router.push(d.path)
}
</script>

<template>
    <div id="con">
        <div @click="to(item)" class="item" v-for="item in list">
            {{item.name}}
        </div>
    </div>
    <!--    <div style="width: 100%;" align="center">-->
    <!--        <a href="javascript:void(0)" @click="a = 0" >前端模拟</a> &nbsp;-->
    <!--        <a href="javascript:void(0)" @click="a = 1" >socket推送PRPS</a> &nbsp;-->
    <!--        <a href="javascript:void(0)" @click="a = 2" >socket性能测试</a> &nbsp;-->
    <!--        <a href="javascript:void(0)" @click="a = 3">SSE 性能测试</a>-->
    <!--    </div>-->
    <!--    <HelloWorld v-if="a === 0"/>-->
    <!--    <Socket v-if="a === 1"/>-->
    <!--    <SocketTest v-if="a === 2"/>-->
    <!--    <SSETest v-if="a === 3"/>-->
</template>

<style scoped>
#con{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 10px;
}
.item{
    color: #f9f9f9;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #646cff;
    height: 50px;
    cursor: pointer;
}
</style>
